<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>维护管理 - 智能工业数据采集与分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }
        .sidebar {
            background-color: #2c3e50;
            color: white;
            min-height: 100vh;
            position: fixed;
        }
        .sidebar a {
            color: #ecf0f1;
            display: block;
            padding: 12px 15px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .sidebar a:hover {
            background-color: #34495e;
        }
        .sidebar a.active {
            background-color: #16a085;
        }
        .content {
            margin-left: 250px;
            padding: 20px;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .status-green {
            background-color: #27ae60;
        }
        .status-yellow {
            background-color: #f39c12;
        }
        .status-red {
            background-color: #e74c3c;
        }
        .maintenance-card {
            border-left: 4px solid #3498db;
        }
        .maintenance-card.pending {
            border-left: 4px solid #f39c12;
        }
        .maintenance-card.completed {
            border-left: 4px solid #27ae60;
        }
        .maintenance-card.urgent {
            border-left: 4px solid #e74c3c;
        }
        .maintenance-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .maintenance-date {
            font-size: 0.9rem;
            color: #666;
        }
        .maintenance-device {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .maintenance-description {
            margin-bottom: 10px;
        }
        .filter-section {
            margin-bottom: 20px;
        }
        .priority-indicator {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            color: white;
        }
        .priority-high {
            background-color: #e74c3c;
        }
        .priority-medium {
            background-color: #f39c12;
        }
        .priority-low {
            background-color: #27ae60;
        }
        .progress-bar {
            height: 20px;
            border-radius: 4px;
            background-color: #ecf0f1;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            transition: width 0.3s ease;
        }
        .progress-fill.good {
            background-color: #27ae60;
        }
        .progress-fill.warning {
            background-color: #f39c12;
        }
        .progress-fill.critical {
            background-color: #e74c3c;
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
            margin-bottom: 20px;
        }
        .action-btn {
            margin-right: 5px;
            padding: 5px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .action-btn-primary {
            background-color: #3498db;
            color: white;
        }
        .action-btn-primary:hover {
            background-color: #2980b9;
        }
        .action-btn-secondary {
            background-color: #95a5a6;
            color: white;
        }
        .action-btn-secondary:hover {
            background-color: #7f8c8d;
        }
        .action-btn-danger {
            background-color: #e74c3c;
            color: white;
        }
        .action-btn-danger:hover {
            background-color: #c0392b;
        }
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }
        .modal-title {
            margin: 0;
            font-size: 1.25rem;
        }
        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-control {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-control:focus {
            outline: none;
            border-color: #3498db;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="sidebar" style="width: 250px;">
        <div class="sidebar-header p-4 text-center">
            <h4><i class="fa fa-industry"></i> 工业数据系统</h4>
        </div>
        <div class="sidebar-menu">
            <a href="/" class=""><i class="fa fa-dashboard mr-2"></i> 仪表盘</a>
            <a href="/dashboard"><i class="fa fa-bar-chart mr-2"></i> 数据监控</a>
            <a href="/alarms"><i class="fa fa-bell mr-2"></i> 报警中心</a>
            <a href="/maintenance" class="active"><i class="fa fa-wrench mr-2"></i> 维护管理</a>
            <a href="/reports"><i class="fa fa-file-text mr-2"></i> 报表生成</a>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2>维护管理中心</h2>
                        <div class="d-flex align-items-center">
                            <span id="connection-status" class="mr-4">
                                <span class="status-indicator status-green"></span>
                                <span>系统正常</span>
                            </span>
                            <span id="current-time">--:--:--</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 维护概览卡片 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">待处理维护</h5>
                                <i class="fa fa-clock-o fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">3</p>
                            <p class="card-text">包括1项紧急维护</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">本月完成</h5>
                                <i class="fa fa-check-circle fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">8</p>
                            <p class="card-text">完成率: 89%</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">预防维护</h5>
                                <i class="fa fa-calendar-check-o fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">5</p>
                            <p class="card-text">未来30天</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="card-title">AI预测</h5>
                                <i class="fa fa-cogs fa-2x"></i>
                            </div>
                            <p class="card-text" style="font-size: 2.5rem; font-weight: bold;">92%</p>
                            <p class="card-text">预测准确率</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 维护需求预测图表 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">维护需求预测</h5>
                            <div class="chart-container">
                                <canvas id="maintenancePredictionChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">设备健康状况分布</h5>
                            <div class="chart-container">
                                <canvas id="healthDistributionChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 预测性维护建议 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="card-title">AI预测性维护建议</h5>
                                <div>
                                    <button id="refresh-suggestions-btn" class="action-btn action-btn-primary">
                                        <i class="fa fa-refresh mr-1"></i> 刷新建议
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 维护建议列表 -->
                            <div class="maintenance-list">
                                <!-- 紧急维护建议 -->
                                <div class="card mb-3 maintenance-card urgent">
                                    <div class="card-body">
                                        <div class="maintenance-header">
                                            <div>
                                                <span class="priority-indicator priority-high">高优先级</span>
                                                <span class="maintenance-date">预计需要维护: 3天内</span>
                                            </div>
                                            <button class="action-btn action-btn-primary" data-device-id="vibration_sensor_002">创建维护记录</button>
                                        </div>
                                        <div class="maintenance-device">振动传感器2 (ID: vibration_sensor_002)</div>
                                        <div class="maintenance-description">
                                            <p>基于振动模式分析，设备轴承可能存在异常磨损，建议立即检查并更换轴承。</p>
                                            <p class="mt-2 text-sm text-gray-600">
                                                <strong>AI分析结果:</strong> 振动频谱分析显示3倍旋转频率分量异常增加，可能是轴承故障的早期迹象。
                                            </p>
                                        </div>
                                        <div class="mt-3">
                                            <div class="mb-1">维护需求预测: <span class="text-red-600 font-bold">92%</span></div>
                                            <div class="progress-bar">
                                                <div class="progress-fill critical" style="width: 92%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 中等优先级维护建议 -->
                                <div class="card mb-3 maintenance-card pending">
                                    <div class="card-body">
                                        <div class="maintenance-header">
                                            <div>
                                                <span class="priority-indicator priority-medium">中优先级</span>
                                                <span class="maintenance-date">预计需要维护: 7天内</span>
                                            </div>
                                            <button class="action-btn action-btn-primary" data-device-id="temp_sensor_001">创建维护记录</button>
                                        </div>
                                        <div class="maintenance-device">温度传感器1 (ID: temp_sensor_001)</div>
                                        <div class="maintenance-description">
                                            <p>传感器响应时间延长，可能是传感器老化或连接松动，建议进行校准检查。</p>
                                            <p class="mt-2 text-sm text-gray-600">
                                                <strong>AI分析结果:</strong> 传感器响应时间较基线增加了42%，可能影响温度控制精度。
                                            </p>
                                        </div>
                                        <div class="mt-3">
                                            <div class="mb-1">维护需求预测: <span class="text-yellow-600 font-bold">65%</span></div>
                                            <div class="progress-bar">
                                                <div class="progress-fill warning" style="width: 65%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 低优先级维护建议 -->
                                <div class="card mb-3 maintenance-card">
                                    <div class="card-body">
                                        <div class="maintenance-header">
                                            <div>
                                                <span class="priority-indicator priority-low">低优先级</span>
                                                <span class="maintenance-date">预计需要维护: 30天内</span>
                                            </div>
                                            <button class="action-btn action-btn-primary" data-device-id="pressure_sensor_001">创建维护记录</button>
                                        </div>
                                        <div class="maintenance-device">压力传感器1 (ID: pressure_sensor_001)</div>
                                        <div class="maintenance-description">
                                            <p>传感器零点漂移略有增加，建议进行定期校准以保持测量精度。</p>
                                            <p class="mt-2 text-sm text-gray-600">
                                                <strong>AI分析结果:</strong> 零点漂移在过去30天内增加了0.03bar，仍在允许范围内。
                                            </p>
                                        </div>
                                        <div class="mt-3">
                                            <div class="mb-1">维护需求预测: <span class="text-green-600 font-bold">32%</span></div>
                                            <div class="progress-bar">
                                                <div class="progress-fill good" style="width: 32%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 维护记录 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="card-title">维护记录</h5>
                                <div class="d-flex">
                                    <button id="add-maintenance-btn" class="action-btn action-btn-primary">
                                        <i class="fa fa-plus mr-1"></i> 添加维护记录
                                    </button>
                                    <button id="load-more-maintenance-btn" class="action-btn action-btn-secondary ml-2">加载更多</button>
                                </div>
                            </div>
                            
                            <!-- 维护记录列表 -->
                            <div class="maintenance-list">
                                <!-- 待处理维护记录 -->
                                <div class="card mb-3 maintenance-card pending">
                                    <div class="card-body">
                                        <div class="maintenance-header">
                                            <div>
                                                <span class="priority-indicator priority-medium">待处理</span>
                                                <span class="maintenance-date">计划日期: 2023-05-20</span>
                                            </div>
                                            <div>
                                                <button class="action-btn action-btn-primary" data-maintenance-id="1">编辑</button>
                                                <button class="action-btn action-btn-danger">删除</button>
                                            </div>
                                        </div>
                                        <div class="maintenance-device">温度传感器2 (ID: temp_sensor_002)</div>
                                        <div class="maintenance-description">定期校准与清洁，确保温度测量准确性。</div>
                                        <div class="mt-2">
                                            <small class="text-muted">创建人: 王工程师 | 状态: 待处理 | 优先级: 中等</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 已完成维护记录 -->
                                <div class="card mb-3 maintenance-card completed">
                                    <div class="card-body">
                                        <div class="maintenance-header">
                                            <div>
                                                <span class="priority-indicator priority-low">已完成</span>
                                                <span class="maintenance-date">完成日期: 2023-05-10</span>
                                            </div>
                                            <button class="action-btn action-btn-secondary" data-maintenance-id="2">查看详情</button>
                                        </div>
                                        <div class="maintenance-device">振动传感器1 (ID: vibration_sensor_001)</div>
                                        <div class="maintenance-description">更换轴承并重新校准传感器，解决振动异常问题。</div>
                                        <div class="mt-2">
                                            <small class="text-muted">创建人: 张工程师 | 完成人: 李工程师 | 耗时: 2小时</small>
                                        </div>
                                        <div class="mt-2">
                                            <div class="text-sm">
                                                <strong>维护总结:</strong> 轴承磨损严重，已按计划更换。更换后振动值恢复正常范围。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑维护记录模态框 -->
    <div id="maintenance-modal" class="modal-backdrop hidden">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">添加维护记录</h3>
                <button class="modal-close" id="close-modal-btn">×</button>
            </div>
            <form id="maintenance-form">
                <div class="form-group">
                    <label for="device-select">选择设备</label>
                    <select id="device-select" class="form-control">
                        <option value="temp_sensor_001">温度传感器1 (ID: temp_sensor_001)</option>
                        <option value="temp_sensor_002">温度传感器2 (ID: temp_sensor_002)</option>
                        <option value="pressure_sensor_001">压力传感器1 (ID: pressure_sensor_001)</option>
                        <option value="pressure_sensor_002">压力传感器2 (ID: pressure_sensor_002)</option>
                        <option value="vibration_sensor_001">振动传感器1 (ID: vibration_sensor_001)</option>
                        <option value="vibration_sensor_002">振动传感器2 (ID: vibration_sensor_002)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="maintenance-date">维护日期</label>
                    <input type="date" id="maintenance-date" class="form-control">
                </div>
                <div class="form-group">
                    <label for="maintenance-description">维护描述</label>
                    <textarea id="maintenance-description" class="form-control" rows="3" placeholder="请输入维护描述..."></textarea>
                </div>
                <div class="form-group">
                    <label for="maintenance-priority">优先级</label>
                    <select id="maintenance-priority" class="form-control">
                        <option value="low">低</option>
                        <option value="medium">中</option>
                        <option value="high">高</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="maintenance-status">状态</label>
                    <select id="maintenance-status" class="form-control">
                        <option value="pending">待处理</option>
                        <option value="in_progress">进行中</option>
                        <option value="completed">已完成</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="maintenance-notes">维护记录（可选）</label>
                    <textarea id="maintenance-notes" class="form-control" rows="3" placeholder="请输入维护记录或总结..."></textarea>
                </div>
                <div class="mt-4 text-right">
                    <button type="button" id="cancel-modal-btn" class="action-btn action-btn-secondary">取消</button>
                    <button type="submit" class="action-btn action-btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            document.getElementById('current-time').textContent = `${hours}:${minutes}:${seconds}`;
        }
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();

        // 图表对象
        let maintenancePredictionChart, healthDistributionChart;

        // 初始化维护需求预测图表
        function initMaintenancePredictionChart() {
            const ctx = document.getElementById('maintenancePredictionChart').getContext('2d');
            
            // 模拟数据 - 未来30天的维护需求预测
            const labels = [];
            const currentDate = new Date();
            for (let i = 0; i < 30; i++) {
                const date = new Date(currentDate);
                date.setDate(currentDate.getDate() + i);
                labels.push(`${date.getMonth() + 1}/${date.getDate()}`);
            }
            
            // 生成模拟数据
            const predictionData = [];
            const actualData = [];
            
            for (let i = 0; i < 10; i++) { // 过去10天
                actualData.push(Math.floor(Math.random() * 3) + 1);
                predictionData.push(actualData[i]); // 过去的数据预测和实际一致
            }
            
            for (let i = 10; i < 30; i++) { // 未来20天预测
                predictionData.push(Math.floor(Math.random() * 3) + 1);
                actualData.push(null); // 未来没有实际数据
            }
            
            maintenancePredictionChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '预测维护需求',
                            data: predictionData,
                            borderColor: '#3498db',
                            backgroundColor: 'rgba(52, 152, 219, 0.1)',
                            tension: 0.4,
                            fill: false
                        },
                        {
                            label: '实际维护需求',
                            data: actualData,
                            borderColor: '#27ae60',
                            backgroundColor: 'rgba(46, 204, 113, 0.1)',
                            tension: 0.4,
                            fill: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        }

        // 初始化设备健康状况分布图表
        function initHealthDistributionChart() {
            const ctx = document.getElementById('healthDistributionChart').getContext('2d');
            
            // 模拟数据
            const data = {
                labels: ['良好', '一般', '需要注意', '不良'],
                datasets: [
                    {
                        label: '设备数量',
                        data: [15, 8, 5, 2],
                        backgroundColor: [
                            'rgba(46, 204, 113, 0.7)',  // 绿色 - 良好
                            'rgba(52, 152, 219, 0.7)',  // 蓝色 - 一般
                            'rgba(243, 156, 18, 0.7)',  // 黄色 - 需要注意
                            'rgba(231, 76, 60, 0.7)'    // 红色 - 不良
                        ],
                        borderColor: [
                            'rgba(46, 204, 113, 1)',
                            'rgba(52, 152, 219, 1)',
                            'rgba(243, 156, 18, 1)',
                            'rgba(231, 76, 60, 1)'
                        ],
                        borderWidth: 1
                    }
                ]
            };
            
            healthDistributionChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${value}台 (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        }

        // 更新系统状态
        function updateSystemStatus() {
            fetch('/api/get_status')
                .then(response => response.json())
                .then(data => {
                    // 更新连接状态
                    const connectionStatus = document.getElementById('connection-status');
                    if (data.connected) {
                        connectionStatus.innerHTML = '<span class="status-indicator status-green"></span><span>系统正常</span>';
                    } else {
                        connectionStatus.innerHTML = '<span class="status-indicator status-red"></span><span>连接断开</span>';
                    }
                })
                .catch(error => {
                    console.error('获取系统状态失败:', error);
                });
        }

        // 刷新维护建议
        function refreshMaintenanceSuggestions() {
            // 这里应该调用API获取最新的维护建议
            console.log('刷新维护建议');
            
            // 模拟加载中
            alert('正在从AI模型获取最新维护建议...');
        }

        // 加载更多维护记录
        function loadMoreMaintenanceRecords() {
            // 这里应该调用API加载更多维护记录
            console.log('加载更多维护记录');
            
            // 模拟加载中
            alert('正在加载更多维护记录...');
        }

        // 打开添加/编辑维护记录模态框
        function openMaintenanceModal(isEdit = false, maintenanceId = null) {
            const modal = document.getElementById('maintenance-modal');
            const modalTitle = document.getElementById('modal-title');
            
            if (isEdit) {
                modalTitle.textContent = '编辑维护记录';
                // 这里应该调用API获取维护记录详情并填充表单
                console.log('编辑维护记录:', maintenanceId);
            } else {
                modalTitle.textContent = '添加维护记录';
                // 重置表单
                document.getElementById('maintenance-form').reset();
                // 设置默认日期为今天
                const today = new Date().toISOString().split('T')[0];
                document.getElementById('maintenance-date').value = today;
            }
            
            modal.classList.remove('hidden');
        }

        // 关闭维护记录模态框
        function closeMaintenanceModal() {
            document.getElementById('maintenance-modal').classList.add('hidden');
        }

        // 提交维护记录表单
        function submitMaintenanceForm(event) {
            event.preventDefault();
            
            // 获取表单数据
            const formData = {
                device_id: document.getElementById('device-select').value,
                maintenance_date: document.getElementById('maintenance-date').value,
                description: document.getElementById('maintenance-description').value,
                priority: document.getElementById('maintenance-priority').value,
                status: document.getElementById('maintenance-status').value,
                notes: document.getElementById('maintenance-notes').value
            };
            
            // 这里应该调用API提交表单数据
            console.log('提交维护记录:', formData);
            
            // 模拟提交成功
            alert('维护记录保存成功!');
            closeMaintenanceModal();
        }

        // 基于AI建议创建维护记录
        function createMaintenanceFromSuggestion(deviceId) {
            openMaintenanceModal(false);
            // 预选设备
            document.getElementById('device-select').value = deviceId;
        }

        // 事件监听器：刷新建议按钮
        document.getElementById('refresh-suggestions-btn').addEventListener('click', refreshMaintenanceSuggestions);
        
        // 事件监听器：加载更多维护记录按钮
        document.getElementById('load-more-maintenance-btn').addEventListener('click', loadMoreMaintenanceRecords);
        
        // 事件监听器：添加维护记录按钮
        document.getElementById('add-maintenance-btn').addEventListener('click', () => openMaintenanceModal());
        
        // 事件监听器：关闭模态框按钮
        document.getElementById('close-modal-btn').addEventListener('click', closeMaintenanceModal);
        document.getElementById('cancel-modal-btn').addEventListener('click', closeMaintenanceModal);
        
        // 事件监听器：提交维护记录表单
        document.getElementById('maintenance-form').addEventListener('submit', submitMaintenanceForm);
        
        // 事件监听器：编辑维护记录按钮
        document.querySelectorAll('.action-btn-primary[data-maintenance-id]').forEach(btn => {
            btn.addEventListener('click', function() {
                const maintenanceId = this.getAttribute('data-maintenance-id');
                openMaintenanceModal(true, maintenanceId);
            });
        });
        
        // 事件监听器：查看详情按钮
        document.querySelectorAll('.action-btn-secondary[data-maintenance-id]').forEach(btn => {
            btn.addEventListener('click', function() {
                const maintenanceId = this.getAttribute('data-maintenance-id');
                // 这里应该显示维护记录详情
                console.log('查看维护记录详情:', maintenanceId);
                alert('查看维护记录详情功能待实现');
            });
        });
        
        // 事件监听器：删除维护记录按钮
        document.querySelectorAll('.action-btn-danger').forEach(btn => {
            btn.addEventListener('click', function() {
                if (confirm('确定要删除这条维护记录吗？')) {
                    // 这里应该调用API删除维护记录
                    console.log('删除维护记录');
                    alert('维护记录已删除');
                }
            });
        });
        
        // 事件监听器：基于AI建议创建维护记录
        document.querySelectorAll('.action-btn-primary[data-device-id]').forEach(btn => {
            btn.addEventListener('click', function() {
                const deviceId = this.getAttribute('data-device-id');
                createMaintenanceFromSuggestion(deviceId);
            });
        });

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化图表
            initMaintenancePredictionChart();
            initHealthDistributionChart();
            
            // 初始化系统状态
            updateSystemStatus();
            
            // 定期更新系统状态
            setInterval(updateSystemStatus, 5000);
        });
    </script>
</body>
</html>